<template>
  <div class="result-wrapper">
     <!-- 渲染每个查询结果 -->
      <div class="song" v-for="(item,index) in songList" :key="'songsList'+index">
        <div class="name">
          <!-- 歌曲播放 -->
          <a class="iconfont icon-play"  @click.prevent="toPlayer(item.id,item.mvid)"></a>

          <!-- 歌曲评论 -->
          <a @click.prevent="toComment(item.id,item.mvid)">{{ item.name }}</a>

          <!-- 歌曲mv -->
          <a class="iconfont icon-editmedia"  @click.prevent="toVideo(item.id,item.mvid)" v-if="item.mvid"></a>
        </div>
        <div class="singer">{{item.artists | geshou }}</div>
        <div class="album">《{{ item.album.name }}》</div>
        <div class="time">{{ item.duration | shichang }}</div>
      </div>
    </div>
</template>

<script>

export default {
  data(){
    return{
      // 保存查询结果
      songList:[]
    }
  },
  created(){
    // 首次查询
    this.getSongs()
  },
  watch:{
    // 首次查询之后的每次查询
    '$route.params.id'(){
      this.getSongs()
    }
    
  },
  // 过滤器
  filters:{
    // 歌手名称过滤器
    geshou(val){
      const arts = val.map(function(item){
        return item.name
      })
      return arts.join(' | ')
    },
    // 歌曲时长过滤器
    shichang(ltime){
      const totalSec = ltime / 1000
      let min = ~~(totalSec/60)
      // min = min <10? '0'+min : min
      let sec = ~~(totalSec % 60);
      sec = sec <10? '0'+sec :sec
      return  min+':'+sec
    },
  },
  methods:{
    //发起请求 获取所有符合关键词的歌曲
    async getSongs(){
      this.songList = await this.$axios.get('/search?keywords='+this.$route.params.id)
      if(this.songList.data !== undefined){
        this.songList = this.songList.data.result.songs
      }
      
    },
    toPlayer(id,mvid){
      // 歌曲id和mvid 传递1 
      // console.log('起点',val)
      this.$emit('pushId',{mvid,id})
      // 路由的跳转
      this.$router.push('/player/'+id)
    },
    toComment(id,mvid){
      // 歌曲id和mvid 传递1
      this.$emit('pushId',{mvid,id})
      // 路由的跳转
      this.$router.push('/comment/'+id+'&type=0')
    },
    toVideo(id,mvid){
      // 歌曲id和mvid 传递1
      this.$emit('pushId',{mvid,id})
      // 路由的跳转
      this.$router.push('/video/'+mvid)
    }
  },
}
</script>

<style scoped>
@import '@/assets/css/results.css';
</style>